import userEvent from '@testing-library/user-event'
import React, { useEffect, useState } from 'react'
import { Button, Space, Toast } from 'antd-mobile'
import styles from './index.css'
import './index.css'
//
import axios from 'axios'
//
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
export default function Index() {
  const [colors, setColor] = useState([])
  const [swiperList, setswiperList] = useState([])
  useEffect(() => {
    setColor(
      ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    )
  }, [swiperList])
  useEffect(() => {
    axios.get('/home/swiper').then(res => {
      console.log(res)
      let { data } = res
      console.log(data)
      setswiperList(data.body)
      console.log("swiperList",swiperList)
    })
  }, [])
  return (
    <div>
      <div className='new swiperFather'>
        <Swiper
          spaceBetween={50}
          slidesPerView={3}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
        >
          {

            swiperList.length > 0 && swiperList.map((item, index) => {
              return <SwiperSlide key={item.id}></SwiperSlide>
            })
          }
        </Swiper>
      </div>
    </div>
  )
}
